<template>
    <div class="app-service">
        <div class="left-down"></div>
        <div class="right-down"></div>
        <ModalTitle title="app服务分析" :isBogBox="true" />
        <div class="charts" ref="echarts"></div>
    </div>
</template>

<script>
import ModalTitle from '@components/ModalTitle/Index.vue'
import {ZongHeZhiFaShDB} from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    mounted() {
        this.getAppData()
    },
    methods: {
        // app服务分析
        getAppData() {
            ZongHeZhiFaShDB.appServiceAPI().then(res => {
                let count = []
                let date = []
                console.log(res,'app服务分析');
                if(res.code == 200){
                    res.data.forEach(item => {
                        count.push(item.count)
                        date.push(item.date)
                    })
                    this.init(count,date)
                }
            })
        },
        init(count,date) {
            let x = date
            let mycharts = echarts.init(this.$refs.echarts)
            let option = {
                backgroundColor: '',
                grid: {
                    left: 30,
                    top: 30,
                    right: 30,
                    bottom: 30
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                },
                xAxis: [{
                    show: true,
                    // x轴刻度
                    axisTick: {
                        show: false,
                        interval: 1,
                    },
                    // x轴轴线
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        lineStyle: {
                            color: '#5FD7FC'
                        }
                    },
                    // x轴数据
                    data: x,
                    // 显示指示线条
                    axisPointer: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                        }
                    },
                    textStyle: { color: '#fff', fontSize: 12 },
                }],
                yAxis: [{
                    show: true,
                    type: 'value',
                    name: '数量(次)',
                    nameLocation: 'end',
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12,
                        align: 'center'
                    },
                    // y轴轴线
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        symbolOffset: [0, 15],
                        lineStyle: {
                            color: '#A1E3FD'
                        }
                    },
                    // y轴轴线
                    axisLabel: {
                        textStyle: {
                            show: true,
                            color: "#fff"
                        }
                    },
                    // y轴刻度
                    axisTick: {
                        show: true,
                        inside: true
                    },
                    // y轴分割线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#23597A'
                        }
                    }
                },

                ],
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        itemStyle: {
                            normal: {
                                color: '#23D0C4',
                                lineStyle: {
                                    color: "#23D0C4",
                                    width: 2
                                },
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'RGBA(56, 177, 193, 0.3)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'RGBA(56, 177, 193, 0)'
                                    }
                                ], false),
                            }
                        },
                        data: count
                    },

                ]
            };
            option && mycharts.setOption(option)
        }
    },
}
</script>

<style lang="less" scoped>
.app-service {
    width: 100%;
    height: 47.5rem;

    .left-down {
        position: absolute;
        bottom: 0.5rem;
        left: 0.5rem;
        width: 1rem;
        height: 1rem;
        background-image: url('../../../../assets/images/zhangzi/shimin/leftdown.png');
        background-size: 100% 100%;
    }

    .right-down {
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        width: 1rem;
        height: 1rem;
        background-image: url('../../../../assets/images/zhangzi/shimin/rightdown.png');
        background-size: 100% 100%;
    }

    .charts {
        width: 100%;
        height: calc(100% - 3.8rem - 1.5rem);
        margin-top: 1.5rem;
    }
}
</style>